<template>
  <div style="display: flex; margin-bottom: 8px">
    <div style="flex: 0 0 500px;flex-direction:column">
      <span >
        标注ITTO所在的过程
      </span>
      <PmpItemSearch 
        style="flex: 1 1 auto;width:900px;"
        :itemClassify="'IO,TECH_TOOL'"
        @selected="focusIttoHighLight"
        placeholder="请选择输入、输出、技术工具"
      ></PmpItemSearch>
    </div>
    <div style="flex: 1 1 auto"></div>
  </div>

  <div style="display: flex">
    <div class="cont" style="flex: 0 0 ">
      <div class="item" style="border-width: 0px"></div>
      <div
        class="item gp_tit"
        v-for="pg in pmpHooks.processGroupList.value"
        :key="pg.id"
        style="text-align: center; font-weight: bold;width:200px;"
      >
        <PmpItemNameCustom :id="pg.id" :attr="`nameCn`">
          <span>{{ pg.nameCn }}</span>
        </PmpItemNameCustom>
      </div>

      <template v-for="ka in pmpHooks.knowledgeAreaList.value" :key="ka.id">
        <div class="item ka_tit" style="text-align: center; font-weight: bold">
          <PmpItemNameCustom :id="ka.id" :attr="`nameCn`">
            <span>{{ ka.nameCn }}</span>
          </PmpItemNameCustom>
        </div>
        <div
          class="item"
          v-for="pg in pmpHooks.processGroupList.value"
          :key="pg.id"
        >
          <div
            v-for="p in pmpHooks.processBelong.value[pg.id][ka.id]"
            :key="p.id"
          >
            <PmpItemName :id="p.id" :attr="`nameCn`"></PmpItemName>
          </div>
          <!-- <template v-for="p in Object.values(pmpHooks.processList.value)">
          <template
            v-if="
              p.belongProcessGroup == pg.id && p.belongKnowledgeArea == ka.id
            "
          >
            <PmpItemName :key="p.id" :id="p.id" :attr="`nameCn`"></PmpItemName>
          </template>
        </template> -->
        </div>
      </template>
    </div>
    <div style="flex: 0 0 176px; padding: 0px 8px">
    
      <div >
        <a-button  class="ot" @click="pmpHooks.processLeftMatch('管理')" size="small" type="primary">管</a-button>
        <a-button class="ot" @click="pmpHooks.processLeftMatch('制定')" size="small" type="primary">制</a-button>
        <a-button class="ot" @click="pmpHooks.processLeftMatch('规划')" size="small" type="primary">规</a-button>
        <a-button class="ot" @click="pmpHooks.processLeftMatch('估算')" size="small" type="primary">估</a-button>
        <a-button class="ot" @click="pmpHooks.processLeftMatch('定义')" size="small" type="primary">定</a-button>
        <a-button class="ot" @click="pmpHooks.processLeftMatch('监控')" size="small" type="primary">监</a-button>
        <a-button class="ot" @click="pmpHooks.processLeftMatch('控制')" size="small" type="primary">控</a-button>
        <a-button class="ot" @click="pmpHooks.processMatch('工作')" size="small" type="primary">工</a-button>
        <a-button class="ot" @click="pmpHooks.processLeftMatch('识别')" size="small" type="primary">识</a-button>
        <a-button class="ot" @click="pmpHooks.processLeftMatch('实施')" size="small" type="primary">施</a-button>
        <a-button class="ot" @click="pmpHooks.processLeftMatch('获取')" size="small" type="primary">获</a-button>
        <a-button class="ot" @click="pmpHooks.processLeftMatch('创建')" size="small" type="primary">建</a-button>
        <a-button class="ot" @click="pmpHooks.processLeftMatch('指导')" size="small" type="primary">指</a-button>
        <a-button class="ot" @click="pmpHooks.processLeftMatch('确认')" size="small" type="primary">确</a-button>
        <a-button class="ot" @click="pmpHooks.processLeftMatch('结束')" size="small" type="primary">结</a-button>
        <a-button class="ot" @click="pmpHooks.processLeftMatch('创建')" size="small" type="primary">创</a-button>
        <a-button class="ot" @click="pmpHooks.processLeftMatch('排列')" size="small" type="primary">排</a-button>
        <a-button class="ot" @click="pmpHooks.processLeftMatch('收集')" size="small" type="primary">收</a-button>

      </div>
      <div style="margin-top:16px;">
        <a-button class="ot" type="primary" @click="pmpHooks.processOutputThreeBenchmark" size="small"
          >三基准</a-button
        >
        <a-button class="ot" type="primary" @click="pmpHooks.processOutputLog" size="small">三日志</a-button>
        <a-button class="ot" type="primary" @click="pmpHooks.processOutputRegister" size="small">三登记册</a-button>
        <a-button class="ot" type="primary" @click="pmpHooks.processOutputReport" size="small">四报告</a-button>
        
      </div>
      <div style="margin-top:16px;">
        <a-button class="ot" @click="pmpHooks.clearHh" block size="small">清空标记</a-button>
      </div>
      <div style="margin-top:16px;">
        <Topic c="eva">EVA挣值分析</Topic>
        <Topic c="projectPortfolioAndProgram">项目集与项目组合</Topic>
        <Topic c="investmentBenefit">投资回收期</Topic>
        <Topic c="expectedMonetaryValue">预期货币值</Topic>
        <Topic c="regret">后悔值</Topic>

      </div>
    </div>

    <!-- <div style="flex: 0 0 195px;padding: 0px 8px">

      <div
        class="item gp_tit"
        style="text-align:center; font-weight: bold;margin-bottom:8px;"
      >
      绩效域
      </div>
      <div
        class="item pd_tit"
        v-for="pd in pmpHooks.performanceDomainList.value"
        :key="pd.id"
        style="text-align: center; font-weight: bold;margin-bottom:8px;"
      >
        <PmpItemNameCustom :id="pd.id" :attr="`nameCn`">
          <span>{{ pd.nameCn }}</span>
        </PmpItemNameCustom>
      </div>
    </div> -->
  </div>
</template>

<script setup>
import { ref } from 'vue'
import pmpHooks from '@/hooks/PmpHooks.js'
import CONSTANTS from '@/constants/Constants.js'
// import PmpItemName from '@/components/PmpItemName.vue'
import PmpItemNameCustom from '@/components/PmpItemNameCustom.vue'
import PmpItemSearch from '@/components/PmpItemSearch.vue'
function focusIttoHighLight(v) {
  pmpHooks.focusIO(v.id)
}
</script>

<style scoped>
.cont {
  display: grid;
  grid-template-columns: 48px 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 32px auto auto auto auto;
  grid-row-gap: 8px;
  grid-column-gap: 8px;
}
.item {
  border: 1px solid #36393d;
  border-radius: 5px;
  padding: 4px;
  background: #cce5ff;
}
.ka_tit {
  background: #b1ddf0;
  border: 1px solid #0e8088;
}
.gp_tit {
  background: #bac8d3;
  border: 1px solid #10739e;
}
.pd_tit{
  background:#eee;
  border:1px solid #10739e;
}
.ot{
  margin:2px;
}
</style>
